/*
 * @Author: jiu yin
 * @Date: 2024-05-08 14:14:22
 * @LastEditTime: 2024-06-20 16:53:10
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\ticket_order\index.tsx
 * jiu
 */
import { useState, useRef, useEffect } from "react";
import { Radio, ConfigProvider, Input, Image, Button } from "antd";
import "./index.scss";
import { ProTable } from "@ant-design/pro-components";
import type { ActionType } from "@ant-design/pro-components";
import { list_ticket_order, get_order_ticket_list } from "@/api/home";
import User_avatar from "@/comment/user_avatar";
import { thousands } from "@/utils";
import { WechatFilled, AlipayCircleFilled } from "@ant-design/icons";

import ScanModal from "@/comment/ScanModal";
import ManualModal from "./component/ManualModal";
import OrderTicket from "./component/OrderTicket";
import barcodeIcon1 from "@/assets/image/barcodeIcon1.png";
import barcodeIcon2 from "@/assets/image/barcodeIcon2.png";
import { useRoute } from "@/hooks";

export default function index() {
	const actionRef = useRef<ActionType>(null);

	let [params, set_params] = useState({ status: 1, keyword: "" });
	const onChange = (e: any) => {
		set_params({ ...params, status: e.target.value, keyword: "" });
	};

	//支付 enum
	const pay_type = (key: number): React.ReactNode => {
		let obj: { [key: number]: React.ReactNode } = {
			1: (
				<div>
					<AlipayCircleFilled style={{ color: "#009FE8", marginRight: "10px" }} />
					支付宝
				</div>
			),
			2: (
				<div>
					<WechatFilled style={{ color: "#0ABC64", marginRight: "10px" }} /> 微信
				</div>
			),
		};
		return obj[key] || "";
	};

	let [order_ticket_data, set_get_order_ticket] = useState({} as any);
	//查看入场票
	const view_ticket = (value: any) => {
		scan_ticket(value, 3);
	};
	//扫码出票
	let [isModalOpen, setIsModalOpen] = useState(false);
	//首页点击过来直接打开
	useEffect(() => {
		if (barcode == "open") setIsModalOpen(true);
	}, []);
	const scan_ticket_callback = async (order_no: string) => {
		scan_ticket(order_no, 2);
	};
	const scan_ticket = async (order_no: string, status: number) => {
		let { data } = await get_order_ticket_list({ order_no, status });
		set_get_order_ticket(data);
		setIsModalOpen_out(true);
	};
	//手动出票核票
	let [isModalOpenPico, setIsModalOpenPico] = useState(false);

	const reload = () => {
		actionRef.current && actionRef.current.reload();
	};

	//手动出票
	const { getParams } = useRoute();
	const { barcode } = getParams();

	let [step, setStep] = useState(0);
	let [isModalOpen_out, setIsModalOpen_out] = useState(false);
	const manual_out_ticket = () => {
		setStep(0);
		setIsModalOpenPico(true);
	};
	const draw_a_bill = async (value: string, item: any) => {
		let { data } = await get_order_ticket_list({ order_no: item.order_no, status: 1, code: value });
		setIsModalOpenPico(false);
		set_get_order_ticket(data);
		setIsModalOpen_out(true);
	};

	const columns = [
		{
			dataIndex: "index",
			valueType: "indexBorder",
			width: 48,
		},
		{
			title: "商品名称",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className="font-700 flex">
					<Image width={84} className="border-rd-10px" src={item.goods_cover} />
					<div className="ml-10px ">
						<h5 className="c-#161940">{item.goods_name}</h5>
						<p className="c-#5C5F7A">{item.content}</p>
					</div>
				</div>
			),
		},
		{
			title: "订单编号/时间",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<div className=" text-14px">
					<p className="c-#9e9fb0">
						订单号：<span className="c-#323557">{item.order_no}</span>
					</p>
					<p className="c-#9e9fb0">
						出票时间：<span className="c-#323557">{item.created_at}</span>
					</p>
				</div>
			),
		},

		{
			title: "下单用户  ",
			dataIndex: "nickname",
			hideInSearch: true,
			render: (_: any, item: any) => (
				<User_avatar
					options={{
						avatar_url: item.avatar_url,
						nickname: item.nickname,
						id: item.user_id,
					}}
				/>
			),
		},
		{
			title: "含票数量",
			dataIndex: "num",
			hideInSearch: true,
		},
		{
			title: "支付方式",
			dataIndex: "pay_type",
			hideInSearch: true,
			render: (_: any, item: any) => pay_type(item.pay_type),
		},
		{
			title: "订单金额",
			dataIndex: "pay_price",
			hideInSearch: true,
			render: (_: any, item: any) => <span>￥ {thousands(item.pay_price)}</span>,
		},
		{
			title: "状态",
			dataIndex: "refund_status",
			hideInTable: params.status != 3,
			valueType: "select",
			hideInSearch: true,
			valueEnum: {
				1: {
					text: "退款中",
					status: "Error",
				},
				2: {
					text: "已关闭",
					status: "Success",
				},
			},
			// render: (_: any, item: any) => <span>￥ {thousands(item.pay_price)}</span>,
		},
		{
			title: "操作",
			valueType: "option",
			key: "option",
			hideInTable: params.status == 3,
			render: (_: any, item: any) => [
				item.is_settled == 0 ? (
					<a
						key="editable"
						onClick={() => (
							sessionStorage.setItem("ticket_order_item", JSON.stringify(item)), setStep(1), setIsModalOpenPico(true)
						)}>
						手动出票
					</a>
				) : (
					<a key="editable" onClick={() => view_ticket(item.order_no)}>
						查看入场票
					</a>
				),
			],
		},
	];

	return (
		<div className="base_bg_fff entrance ">
			<section className=" mb-30px flex">
				<div
					className="barcodeBg1  h-100px w-405px box-border p-30px  flex items-center cursor-pointer"
					onClick={() => manual_out_ticket()}>
					<img src={barcodeIcon1} alt="" className="w-120px h-110px" />
					<div className="c-#161940 ml-30px">
						<p className="text-18px font-700">手动出票</p>
						<p className="mt-8px">精确识别核票码</p>
					</div>
				</div>
				<div
					className="barcodeBg2 ml-20px  h-100px w-405px box-border p-30px  flex items-center cursor-pointer"
					onClick={() => setIsModalOpen(true)}>
					<img src={barcodeIcon2} alt="" className="w-120px h-110px" />
					<div className="c-#161940 ml-30px">
						<p className="text-18px font-700">扫码出票</p>
						<p className="mt-8px">一键开启扫码枪</p>
					</div>
				</div>
			</section>
			<section className="flex justify-between">
				<Radio.Group onChange={onChange} defaultValue={1}>
					<Radio.Button value={1}>待出票订单</Radio.Button>
					<Radio.Button value={2}>已出票订单</Radio.Button>
					<Radio.Button value={3}>其他订单</Radio.Button>
				</Radio.Group>

				<Input.Search
					placeholder="搜索订单"
					value={params.keyword}
					onChange={e => set_params({ ...params, keyword: e.target.value as string })}
					allowClear
					style={{ width: 440, marginRight: 25 }}
				/>
			</section>

			<div className="mt-20px ml--24px">
				<ConfigProvider>
					<ProTable
						columns={columns}
						actionRef={actionRef}
						params={params}
						request={async (params, sort, filter) => {
							let { data } = await list_ticket_order({
								page: params.current,
								limit: params.pageSize,
								...params,
							});
							data.data.forEach((item: any, index: number) => (item.key = index + 1));
							return {
								data: data.data,
								success: true,
								total: data.total,
							};
						}}
						rowKey="key"
						tableAlertRender={false}
						search={false}
						options={false}
						pagination={{
							pageSize: 10,
							hideOnSinglePage: true,
						}}
						dateFormatter="string"
					/>
				</ConfigProvider>
			</div>
			{isModalOpen && (
				<ScanModal isModalOpen={[isModalOpen, setIsModalOpen]} scan_ticket={scan_ticket_callback} title="扫码出票" />
			)}
			{isModalOpenPico && (
				<ManualModal isModalOpen={[isModalOpenPico, setIsModalOpenPico]} step={[step, setStep]} draw_a_bill={draw_a_bill} />
			)}
			{isModalOpen_out && (
				<OrderTicket
					isModalOpen={[isModalOpen_out, setIsModalOpen_out]}
					order_ticket_data_arr={[order_ticket_data, set_get_order_ticket]}
					reload={reload}
				/>
			)}
		</div>
	);
}
